/**
* Created by 周翔 on 2017/3/30.
*/


<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;"></span>
      </div>

      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="title">
              <el-input v-model="form.title" placeholder="输入名称" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="副标题" prop="subTitle">
              <el-input v-model="form.subTitle" placeholder="输入副标题" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="区块" prop="blockName">
              <el-input v-model="form.blockName" placeholder="输入区块" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指标类型" prop="indicantType">
              <!--<el-input v-model="form.indicantType" placeholder="指标类型" :disabled="disableForm"/>-->
              <el-select v-model="form.indicantType" placeholder="请选择指标类型" :disabled="disableForm"
                         style="width:100%">
                <el-option v-for="item in indicantTypes" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="链接" prop="url">
              <el-input v-model="form.url" placeholder="输入链接" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="版本" prop="version">
              <el-input v-model="form.version" placeholder="输入版本" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签" prop="tag">
              <el-input v-model="form.tag" placeholder="输入标签" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="颜色值" prop="style">
              <el-input v-model="form.style" placeholder="输入颜色值" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优先级" prop="priority">
              <el-input v-model="form.priority" placeholder="输入优先级" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="扩展字段" prop="extraMap">
              <el-input v-model="form.extraMap" placeholder="输入扩展字段" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="description">
              <el-input v-model="form.description" placeholder="输入备注" :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">保存</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script type="text/babel">
  import assignDeep from 'assign-deep'
  import { mapActions } from 'vuex'

  import operationContentStore from './bll/operationContentStore'
  import store from '../../store'
  (!store.state.operationContent) && store.registerModule('operationContent', operationContentStore)

  export default{
    data() {
      return {
        disableForm: true,
        pageModel: 'ADD',
        indicantTypes: [
          {value: '1W', label: '一周'},
          {value: 'L1W', label: '最近一周'},
          {value: '1M', label: '一个月'},
          {value: '3M', label: '三个月'},
          {value: '6M', label: '六个月'},
          {value: '1Y', label: '一年'},
          {value: '2Y', label: '两年'},
          {value: '3Y', label: '三年'},
          {value: '5Y', label: '五年'},
          {value: '10Y', label: '十年'}
        ],
        indicantDescriptions: {
          '1W': '上周收益',
          '1LW': '近一周收益',
          '1M': '近一个月收益',
          '3M': '近三个月收益',
          '6M': '近半年收益',
          '1Y': '近一年收益',
          '2Y': '近两年收益',
          '3Y': '近三年收益',
          '5Y': '近五年收益',
          '10Y': '近十年收益'
        },
        form: {
          id: null,
          title: '',
          subTitle: '',
          tag: '',
          style: '',
          blockName: '',
          priority: '',
          indicant: '',
          status: '',
          url: '',
          extraMap: '{"fundCode":"xxxxxx"}',
          indicantType: '',
          version: '1',
          description: '',
          indicantDescription: ''
        },
        rules: {
          title: [
            {required: true, message: '此项不能为空'}
          ],
          subTitle: [
            {required: true, message: '此项不能为空'}
          ],
          tag: [
            {required: true, message: '此项不能为空'}
          ],
          style: [
            {required: true, message: '此项不能为空'}
          ],
          blockName: [
            {required: true, message: '此项不能为空'}
          ],
          priority: [
            {required: true, message: '此项不能为空'}
          ],
          indicant: [
            {required: true, message: '此项不能为空'}
          ],
          url: [
            {required: false}
          ],
          extraMap: [
            {required: true, message: '此项不能为空'}
          ],
          version: [
            {required: true, message: '此项不能为空'}
          ],
          indicantType: [
            {required: true, message: '此项不能为空'}
          ],
          description: [
            {required: false}
          ],
          indicantDescription: [
            {required: false}
          ]
        }
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.id = record.id;
          this.form.title = record.title;
          this.form.subTitle = record.subTitle;
          this.form.tag = record.tag;
          this.form.style = record.style;
          this.form.blockName = record.blockName;
          this.form.priority = record.priority;
          this.form.indicant = record.indicant;
          this.form.url = record.url;
          //this.form.status = record.status;
          this.form.version = record.version;
          this.form.indicantType = record.indicantType;
          this.form.description = record.description;
          this.form.extraMap = record.extraMap;
        } else {
          assignDeep(this.form, {
            id: '',
            title: '',
            subTitle: '',
            tag: '',
            style: '',
            blockName: '',
            priority: '',
            indicant: '',
            status: '',
            url: '',
            extraMap: '{"fundCode":"xxxxxx"}',
            indicantType: '',
            version: '1',
            description: '',
            indicantDescription: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['saveOperationContent', 'updateOperationContent', 'queryOperationContent']),
      saveHandler() {
        let self = this;

        this.$refs.form.validate((valid) => {
          if (valid) {
            this.form.indicantDescription = this.indicantDescriptions[this.form.indicantType];
            delete this.form.status;
            //继续添加 或 返回列表
            let userInfo = assignDeep({}, self.form);
            self[self.pageModel === 'ADD' ? 'saveOperationContent' : 'updateOperationContent'](userInfo).then(() => {
              this.queryOperationContent();
              self.disable();
              if (self.pageModel === 'ADD') {
                self.resetHandler();
                self.$message.success('添加基金推荐信息成功');
              } else {
                self.resetHandler();
                self.$alert('更新基金推荐信息成功', '消息', {
                  confirmButtonText: 'OK'
                });
              }
            })
          } else {
            this.$message({
              showClose: true,
              message: '请检查你的信息填写',
              type: 'error'
            });

            return false;
          }
        });
      },

      resetHandler() {
        this.$refs.form.resetFields();
        this.disableForm = true;
      },


      initPage() {
      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>
